<template>
	<view>
		<view class="page__hd">
			<view class="page__title">准备好接收祝福</view>
			<view class="page__desc">查看寄给您所在地的祝福锦囊</view>
		</view>
		<view class="weui-cells__title">输入您的所在地 ( <text class="address-ad-text" @tap="locateNow">点此快速输入</text> )</view>
		<locator ref="locator" :region="loc.region" :gps="loc.gps" :customItem="'全部'" @placeupdate="locUpdate"></locator>
		<view class="weui-cells__title" v-if="loc.location">搜索条件</view>
		<view class="weui-cells weui-cells_after-title" v-if="loc.location">
			<view class="weui-cell weui-cell_switch">
				<view class="weui-cell__bd">{{nearest?'离我最近':'随机'}}</view>
				<view class="weui-cell__ft">
					<switch :checked="nearest" @change="condUpdate" />
				</view>
			</view>
		</view>
		<view class="weui-cells weui-cells_after-title">
			<view class="weui-cell">
				<view class="weui-cell__bd">
					<button class="weui-btn" type="primary" @tap='next'>下一步</button>
				</view>
			</view>
		</view>
		<rock-shake title="摇一摇获得锦囊" @onrock="rockAndShake" @cancel="showMask=false" v-if="showMask"></rock-shake>
		<!-- <random-collection v-if="showMask" @randnum="rockAndShake"></random-collection> -->
		<package-detail :content="package" v-if="package" @ontapcancel="closePackage"></package-detail>
	</view>
</template>

<script>
	import RockShake from '../../components/rock-shake.vue'
	// import RandomCollection from '../../components/random-collection.vue'
	import Locator from '../../components/place-locator.vue'
	import PackageDetail from '../../components/package-detail.vue'
	import err from '../../common/error.js'
	import utils from '../../common/function.js'
	import sys from '../../common/sys.js'
	import {
		Package
	} from 'common/service.js'
	
	const PKG = new Package()
	
	export default {
		components: {
			Locator,
			RockShake,
			// RandomCollection,
			PackageDetail
		},
		data() {
			return {
				loc: {
					region: ['中国', '湖北省', '武汉市', '全部'],
					location: '',
					gps: [114.291359, 30.430179],
				},
				package: null,
				showMask: false,
				nearest: false,
				timestampId: Date.now(),
			}
		},
		onLoad:function(options){
			uni.setNavigationBarTitle({
			    title: '接收 (Receive)'
			});
			if(options.id && options.id.length>25) {
				PKG.getById(options.id).then(pkg=>{
					this.package = pkg
				})
			}
		},
		onShow: function() {
			this.showMask = false
		},
		methods: {
			locateNow: function() {
				this.$refs.locator.autoLocate()
			},

			locUpdate: function(detail) {
				if (detail.location) sys.toast_done('定位成功')
				this.loc = detail
			},

			condUpdate: function(e) {
				this.nearest = e.detail.value
			},

			cancelMask: function() {
				this.showMask = false
			},

			rockAndShake: utils.freqAsync(1000, async function() {
				sys.toast_loading('检索中')
				this.showMask = false
				let pkg
				if (this.nearest && this.location) {
					pkg = await PKG.searchNearest(this.loc.gps)
				} else {
					pkg = await PKG.searchByRegion(this.loc.region)
				}
				// console.log(pkg)
				if (pkg) {
					this.package = pkg
				} else {
					sys.toast('未找到符合条件的锦囊')
				}
			}),

			next: function() {
				this.showMask = true
			},

			closePackage: function() {
				this.package = null
			},
		}
	}
</script>

<style>
	@import "../../static/weui.min.css";
	.address-ad-text {
		text-decoration: underline;
		color: #33c;
	}
</style>
